<template>
     <el-col :span="24" style="padding-left: 100px;" >
        <el-button type="text" size="mini" @click="addEvt">添加成分数据</el-button>
         <el-table :data="value"
            style="width: 100%"
            size='small'>
            <el-table-column prop="name" label="成分名字" width="120" fixed/>
            <el-table-column prop="count" label="数量" width="120">
                <template v-slot="{row}">
                    <el-input size="mini" v-model="row.count" placeholder="输入数量" />
                </template>
            </el-table-column>
            <el-table-column prop="price" label="售价" width="100"/>
            <el-table-column prop="supplier_name" label="厂商" width="140">
                <template v-slot="{row}">
                    <el-input size="mini" v-model="row.supplier_name" placeholder="输入厂商" />
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100"/>
            <el-table-column prop="unit" label="单位" width="100"/>
            <el-table-column prop="brand" label="品牌" width="130"/>
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="130"/>
            <el-table-column label="操作" width="100" fixed="right">
                <template v-slot="{ row }">
                    <el-button size="mini" type="text" slot="reference" @click="deleteEvt(row.detail_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ProductPick v-model="show" @productAdd="productAddEvt"></ProductPick>
    </el-col>
</template>
<script>
    import ProductPick from "./ProductPick.vue";
    export default {
        components:{ProductPick},
        props:{
            value:{
                type:Array,
                required: true
            }
        },
        data(){
            return{
                show:false
            }
        },
        methods:{
            getData(data){
                console.log('getData',data)
            },
            addEvt(){
                this.show = true
            },
            productAddEvt(data){
                console.log('--data--',data)
                this.$emit('input',data.map(it =>({
                    "detail_id": it.id,
                    "name": it.name,
                    "count": 0,
                    "price": it.price,
                    "supplier_name": "",
                    "type": it.type,
                    "unit": it.unit,
                    "level": it.level,
                    "place": it.place,
                    "brand": it.brand,
                    "remark": it.remark
                })
                ))

            },
            deleteEvt(id){
                // console.log('id',id)
                //  debugger
                this.$emit('input',
                    this.value.filter(it => it.detail_id !== id)
                // this.value.splice( this.value.findIndex(it => it.detail_id == id), 1) 不可以用！！！
                )
            }
        }
    }
</script>
